@import '../index';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none; // 文字不可复制
}

// // reset
// html,
// body {
//   // safari头部问题.
//   // -webkit-overflow-scrolling: touch;
// }

html,
body {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  font-family: SourceHanSansCN, -apple-system-font, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: .28rem;
  color: $--text-color-primary;
  background: #fff;
  line-height: 1.5;
}

input,
textarea {
  -webkit-user-select: text !important
}

// font-size 13 - 43px 等差数列；
@for $i from 0 through 15 {
  $var: 13 + $i * 2;

  .font-size-#{$var} {
    font-size: $var + px;
  }
}

.font-size-8 {
  display: inline-block;
  font-size: $--font-size-xs;
  transform: scale(0.666667);
}

.font-size-9 {
  display: inline-block;
  font-size: $--font-size-xs;
  transform: scale(0.75);
}

.font-size-10 {
  display: inline-block;
  font-size: $--font-size-xs;
  transform: scale(0.833334);
}

.font-size-11 {
  display: inline-block;
  font-size: $--font-size-xs;
  transform: scale(0.9166667);
}

.word-break {
  word-wrap: break-word;
  word-break: break-all;
}

@each $key,
$value in $--font-size-map {
  .#{$key} {
    font-size: $value;
  }
}

// padding magin 
@each $key1,
$value1 in $--padding-margin-map {

  @each $key2,
  $value2 in $--padding-margin-size-map {
    $className: #{$key1}-#{$key2};
    $propetyValue: $value2;

    .#{$className} {
      @each $key3 in $value1 {
        #{$key3}: $propetyValue;
      }
    }
  }
}

// border
@each $key in border,
border-top,
border-right,
border-bottom,
border-left {
  .#{$key} {
    #{$key}: 1px solid $--border-color-base;
  }
}


.float-left {
  float: left;
}

.float-right {
  float: right;
}

.overflow-hidden {
  overflow: hidden;
}

.scroll {
  overflow: auto;
}

.scroll-x,
.overflow-scroll-x {
  overflow-x: scroll;
  overflow-y: hidden;
}

.scroll-y,
.overflow-scroll-y {
  overflow-x: hidden;
  overflow-y: scroll;
}

.tc {
  text-align: center
}

.tr {
  text-align: right
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.clearfix {
  @include utils-clearfix;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  zoom: 1;
}

.ellipsis {
  @include utils-ellipsis;
}

.ellipsis2 {
  @include utils-ellipsis2;
}

.ellipsis3 {
  @include utils-ellipsis2(3);
}

.active,
.zm-active {
  &:active {
    opacity: 0.8;
  }
}

.extend {
  width: 100%;
  height: 100%;
}

// 
.color-theme-primary {
  color: $--text-color-primary;
}

.color-primary {
  color: $--color-primary;
}

.color-primary-light {
  color: $--color-primary-light;
}

.color-success {
  color: $--color-success;
}

.color-success-light-1 {
  color: $--color-success-light-1;
}

.color-success-light-2 {
  color: $--color-success-light-2;
}

.color-warning {
  color: $--color-warning;
}

.color-danger {
  color: $--color-danger;
}

.color-error {
  color: $--color-error;
}

.color-secondary {
  color: $--text-color-secondary;
}

.color-third {
  color: $--text-color-third;
}

.color-white {
  color: $--color-white
}

// background color
.bg-base {
  background-color: $--background-color-base !important;
}

.bg-white {
  background-color: $--color-white !important;
}

// othors

// page compo class

.main-contain,
.wrapper {
  box-sizing: border-box;
}

.text-primary {
  font-size: $--font-size-md;
  vertical-align: middle;
  color: $--color-primary;
}

.text-secondary {
  color: $--text-color-secondary;
  font-size: $--font-size-sm;
  vertical-align: middle;
}

.box-shadow1 {
  @include box-shadow1;
}

.box-shadow2 {
  @include box-shadow2;
}

.box-shadow3 {
  @include box-shadow3;
}

@for $i from 5 through 20 {

  .fs#{$i * 2} {
    font-size: $i * 2*0.02rem !important;
  }
}

@for $i from 0 through 20 {
  .mr#{$i * 5} {
    margin-right: $i * 5*0.02rem !important;
  }

  .ml#{$i * 5} {
    margin-left: $i * 5*0.02rem !important;
  }

  .mt#{$i * 5} {
    margin-top: $i * 5*0.02rem !important;
  }

  .mb#{$i * 5} {
    margin-bottom: $i * 5*0.02rem !important;
  }

  .mg#{$i * 5} {
    margin: $i * 5*0.02rem !important;
  }

  .mlr#{$i*5} {
    margin-left: $i * 5*0.02rem !important;
    margin-right: $i * 5*0.02rem !important;
  }

  .mtb#{$i*5} {
    margin-top: $i * 5*0.02rem !important;
    margin-bottom: $i * 5*0.02rem !important;
  }

  .pr#{$i * 5} {
    padding-right: $i * 5*0.02rem !important;
  }

  .plr#{$i*5} {
    padding-left: $i * 5*0.02rem !important;
    padding-right: $i * 5*0.02rem !important;
  }

  .ptb#{$i*5} {
    padding-top: $i * 5*0.02rem !important;
    padding-bottom: $i * 5*0.02rem !important;
  }

  .pl#{$i * 5} {
    padding-left: $i * 5*0.02rem !important;
  }

  .pt#{$i * 5} {
    padding-top: $i * 5*0.02rem !important;
  }

  .pb#{$i * 5} {
    padding-bottom: $i * 5*0.02rem !important;
  }

  .pd#{$i*5} {
    padding: $i * 5*0.02rem !important;
  }
}

.flex {
  display: flex;
  overflow: hidden;
}

.df-center {
  display: flex;
  overflow: hidden;
  align-items: center;
}
.df-col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
  overflow: hidden;
}

.flex-b {
  justify-content: space-between
}

.flex-m {
  align-items: center;
}

.flex-c {
  justify-content: center
}

.flex-r {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column
}

.flex-vb {
  align-items: flex-end;
}

.flex-w {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1
}

.vm {
  display: inline-block;
  vertical-align: middle;
}

@for $i from 1 through 30 {
  .w#{$i * 10} {
    width: $i * 10*0.02rem;
  }

  @if $i<21 {
    .w#{$i * 5}p {
      width: $i * 5%;
    }
  }
}
.fc-0{
  color: #000;
}
.fc-3{
  color: #333;
}
.fc-6{
  color: #666;
}
.fc-9{
  color: #999;
}
@media screen and (min-width:320px) {
  html {
      font-size: 267%
  }
}

@media screen and (min-width:375px) {
  html {
      font-size: 320%
  }
}

@media screen and (min-width:410px) {
  html {
      font-size: 341.7%
  }
}

@media screen and (min-width:480px) {
  html {
      font-size: 417.3%
  }
}

@media screen and (min-width:640px) {
  html {
      font-size: 533.3%;
  }
}

@media screen and (min-width:750px) {
  html {
      font-size: 380%
  }
}

// @media screen and (min-width:800px) {
//   html {
//       font-size: 667%
//   }
// }

// @media screen and (min-width:900px) {
//   html {
//       font-size: 750%
//   }
// }

// @media screen and (min-width:1000px) {
//   html {
//       font-size: 834%
//   }
// }